import React, { ReactNode } from 'react';
import {
  CardBase,
  CardSection,
  MainButton,
  MainColorType,
  PriceSection,
  Text,
  TextWithPill,
} from '@nova-hf/ui';
import { MainButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/MainButton/MainButton';
import { PillProps } from '@nova-hf/ui/umd/ts/src/pill/Pill';

type RouterCardProps = {
  title: string;
  isSelected: boolean;
  isLoadingData?: boolean;
  totalPrice?: string;
  priceUnit?: string;
  mainButton: MainButtonProps;
  color: MainColorType;
  children?: ReactNode;
  pill?: PillProps;
  description?: string;
};

export const RouterCard = ({
  title,
  isSelected,
  isLoadingData,
  totalPrice,
  priceUnit,
  mainButton,
  color,
  pill,
  children,
  description,
}: RouterCardProps) => {
  return (
    <CardBase
      height="auto"
      hasBorder
      borderColor={isSelected ? color : 'grey200'}
      isLoading={isLoadingData}
      dottedShadow="none"
    >
      <CardSection hasSeperator>
        <TextWithPill color={color} titleVariant="h6" title={title} pill={pill ?? undefined} />
      </CardSection>
      {(children || description) && (
        <CardSection grow hasSeperator>
          {description && (
            <Text variant="pSmallRegular" marginBottom={2}>
              {description}
            </Text>
          )}
          {children && children}
        </CardSection>
      )}
      {totalPrice && priceUnit && (
        <CardSection>
          <PriceSection price={totalPrice} description={priceUnit} />
        </CardSection>
      )}
      <MainButton {...mainButton} />
    </CardBase>
  );
};